<template>
  <view class="beforeLogin">
    <view class="before-content">
      <view class="blLogin">
        <image :src="baseImgUrl + 'beforeLogo.png'"></image>
      </view>

      <view class="welcome"> 欢迎使用餐饮油烟监测小程序！ </view>

      <view>
        <button
          type="default"
          v-if="flag"
          @click="bindUserInfo"
          class="submit-btn"
        >
          登录
        </button>
        <button
          type="default"
          v-else
          class="submit-btn"
          open-type="getPhoneNumber"
          @getphonenumber="onGetPhoneNumber"
        >
          手机号快捷登录
        </button>
      </view>
    </view>

    <view class="base-bgimg">
      <image :src="baseImgUrl + 'beforeBg.png'"></image>
    </view>
  </view>
</template>

<script>
import { userDecrypt, wxLogin } from "@/api/api.js";
let WXBizDataCrypt = require("@/utils/WXBizDataCrypt");

export default {
  data() {
    return {
      baseImgUrl: this.$baseImgUrl,
      code: "",
      flag: true,
    };
  },
  onShow() {
    let _this = this;
    uni.login({
      success(res) {
        _this.code = res.code;
      },
    });
  },
  methods: {
    bindUserInfo() {
      uni.getUserProfile({
        desc: "获取你的昵称、头像",
        success: (res) => {
          getApp().globalData.userInfo = res.userInfo;
          this.flag = false;
        },
        fail: (res) => {
          console.log(res, "错误");
          //用户按了拒绝按钮
          wx.showModal({
            title: "警告",
            content: "您点击了拒绝授权，将无法进入小程序，请授权之后再进入!!!",
            showCancel: false,
            confirmText: "返回授权",
            success: function (res) {
              if (res.confirm) {
                console.log("用户点击了“返回授权”");
              }
            },
          });
        },
      });
    },
    onGetPhoneNumber(e) {
      let phoneInfo = e.detail;
      let encryptedData = phoneInfo.encryptedData;
      let iv = phoneInfo.iv;

      if (e.detail.errMsg == "getPhoneNumber:ok") {
        userDecrypt({ code: this.code }).then((res) => {
          let pc = new WXBizDataCrypt(res.result.appid, res.result.session_key);
          let phone = pc.decryptData(encryptedData, iv).phoneNumber;

          let data = {
            openid: res.result.openid,
            phone,
            avateor: getApp().globalData.userInfo.avatarUrl,
            encryptedData,
            sessionKey: res.result.session_key,
            iv,
            userName: getApp().globalData.userInfo.nickName,
          };

          wxLogin(data).then((res2) => {
            console.log(res2, "登录返回");
            if (res2.code === 200) {
              const { refreshToken, token, userInfo } = res2.result;
              uni.setStorageSync("refreshToken", refreshToken); //刷新token 参数值
              uni.setStorageSync("X-MINI-TOKEN", token);
              uni.setStorageSync("user", userInfo);

              uni.reLaunch({
                url: "/pages/home/home",
              });
            }
          });
        });
      }
    },
  },
};
</script>

<style lang="scss">
.beforeLogin {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  .before-content {
    margin: 0 auto;
    margin-top: 150rpx;
    padding: 50rpx;
    border-radius: 16rpx;
    text-align: center;
    width: 680rpx;
    .blLogin {
      image {
        width: 167rpx;
        height: 167rpx;
      }
    }
  }

  .welcome {
    margin: 30rpx 0 75rpx;
    color: #303030;
    font-size: 36rpx;
    font-weight: 500;
  }

  .base-bgimg {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 280rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
